<template>
    <div id="editPowers">
         <!-- 角色权限分配 -->
        <el-dialog
        title="权限编辑"
        ref="tree"
        :visible.sync="dialogVisible"
        class=''
        top="10vh"
        :close-on-click-modal="false"
        :before-close="handleClose"
        >
            <el-tree
            highlight-current
            :data="dataTree"
            node-key="permissionId"
            :default-checked-keys = "modulesArr"
            default-expand-all
            :expand-on-click-node="false"
            @check-change = "handleCheckChange"	
            show-checkbox
            ref="tree"
            :filter-node-method="handleFilter"
            >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span > {{ data.title }}</span>
                </span>
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="handleCancel">取 消</el-button>
                <el-button type="primary" size="small" @click="handleSubmit">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import Modules from '../../../api/json/modules'
    export default {
        props: ['editPower', 'roleId'],
        created() {
            this.tableData= Modules
        },
        data() {
            return {
                indent: 32,
                multipleSelection: [],
                dataTree: [],
                modulesArr: []
            }
        },
        computed: {
            dialogVisible: {
                get() {
                    return this.editPower
                },
                set() {

                }
            },
        },
        created() {
           
        },
        mounted() {
            this.getModules()
        },
        methods: {
            /**获取角色信息 */
            async getRoleDetails() {
                try{
                    var modules= [], permissionIds= [];
                    await this.$server.systemControlApi.getRoleDetails(this.roleId).then(res => {
                        if(res.data.permissionIds != '' && res.data.permissionIds != null) {
                            if(res.data.permissionIds.length > 1) {
                                res.data.permissionIds.split(',').forEach(item => {
                                    permissionIds.push( +item)
                                })
                                // permissionIds= this.functionFilter2(permissionIds, this.dataTree)
                            }else{
                                permissionIds.push(+res.data.permissionIds)

                            }
                            this.modulesArr= permissionIds
                            this.$refs.tree.filter(this.modulesArr)
                            console.log(permissionIds.length, 'permissionIds-length')
                        }
                    })
                }catch(err){this.$paramsError(err)}
            },
            handleFilter(val, data) {
                console.log(data, 'data')
                if(data.isDelete == 1 || data.isLocked) {
                    return false;
                }else{
                    return true
                }
            },
            functionFilter2(arr, arr1) {
                console.log(arr, arr1, '参数')
                var arr3= []
                arr1.forEach((item, index) => {
                    for(let i = 0; i< arr.length; i++) {
                        if(arr[i] == item.permissionId && item.children.length > 0) {
                            arr.splice(i, 1)
                            this.functionFilter2(arr, item.children)
                        }else {
                            if(arr3.indexOf(arr[i]) == -1) {

                                arr3.push(arr[i])
                            }
                                continue;
                        }
                    }
                })
                console.log(arr3, 'arr3')
                return arr3;
            },
            /**获取模块权限列表 */
            async getModules(){
                await this.$server.systemControlApi.getPermissionList().then(res=>{
                    this.dataTree = this.filterFunction(res.data);
                    this.getRoleDetails()
                })
            },

            handleCheckChange(val) {
                
            },
            filterFunction(arr) {    
                var arr1 = [];
                for(let index = 0; index< arr.length;index++) {
                    let item = arr[index];
                    if(item.isDelete !== 1 && item.isLocked !== 1) {
                        if(item.children.length > 0) {
                           item.children =  this.filterFunction(item.children);
                           arr1.push(item);
                           
                        }else{
                            arr1.push(item);
                        }
                    }else {
                       continue;
                    }
                }
                return arr1;
            },
            filterFunction1(arr) {    
                var arr1 = [], arr2= [];
                for(let index = 0; index< arr.length;index++) {
                    let item = arr[index];
                    if(item.isDelete !== 1 && item.isLocked !== 1) {
                        if(item.children.length > 0) {
                           item.children =  this.filterFunction(item.children);
                           arr1.push(item);
                           arr2.push(item.permissionId)
                        }else{
                            arr1.push(item);
                        }
                    }else {
                       continue;
                    }
                }
                return arr2;
            },
            handleClose() {
                this.$confirm('确认关闭？').then(_ => {
                   this.$emit('cancelShow', false)
                }).catch(_ => {});
            },
     
            handleCancel() {
                this.$emit('cancelShow', false)
            },
            handleSubmit() {
                try {
                    let arr =this.$refs.tree.getCheckedKeys();
                    let arr1= this.$refs.tree.getHalfCheckedKeys();
                    let params= {
                        permissionIds: arr.concat(arr1).toString(),
                        roleId: this.roleId
                    }
                    this.$confirm('确定提交？').then(_ => {
                        this.$server.systemControlApi.systemRoleBindModule(params).then(res => {
                            this.$emit('cancelShow', false)
                            this.$emit('getRoleList')
                        })
                    }).catch()
                }catch(err) {this.$paramsError(err)}
            }
        }
    }
</script>